<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-title-preview" :style="currentStyle">
                    <h2 class="title-preview-main">
                        {{title ? title : '点击编辑『标题』'}}<span class="cap-title-custom-link" v-if="titleTemplate == 0 && navigateName"> - <a href="javascript:;" class="cap-title-link">{{navigateName}}</a></span>
                    </h2>
                    <p class="title-preview-sub">
                        <span v-show="titleTemplate == 0 ">{{subTitle}}</span>
                        <span v-show="titleTemplate == 1 && wxDate" class="title-preview-sub-data">{{wxDate}}</span>
                        <span v-show="titleTemplate == 1 && wxAuthor" class="title-preview-sub-author">{{wxAuthor}}</span>
                        <span v-show="titleTemplate == 1 && wxLinkTitle " class="title-preview-sub-link">{{wxLinkTitle}}</span>
                    </p>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">标题</div>
                <div class="editor-group">
                    <div class="editor-group-label"><em class="group-required-star">*</em>标题名：</div>
                    <div class="editor-group-control">
                        <div class="input-wrap">
                            <input v-model.trim="title" maxlength="100" @input="bindInputTitle">
                        </div>
                        <div v-if="enableValid && hasError" class="design-editor-control-group-error" style="margin-top: 5px">文本不能为空</div>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label ">标题模版：</div>
                    <div class="editor-group-control">
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : titleTemplate == 0 }]" @click="titleTemplate = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>传统样式</span></label>
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : titleTemplate == 1 }]" @click="titleTemplate = 1"><span class="nc-radio"><span class="nc-radio-inner"></span></span> <span>模仿微信图文页样式</span></label>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label">显示位置：</div>
                    <div class="editor-group-control">
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == 0 }]" @click="showMethod = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>居左</span></label>
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == 1 }]" @click="showMethod = 1"><span class="nc-radio"><span class="nc-radio-inner"></span></span> <span>居中</span></label>
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : showMethod == 2 }]" @click="showMethod = 2"><span class="nc-radio"><span class="nc-radio-inner"></span></span> <span>居右</span></label>
                    </div>
                </div>
                <div class="editor-group" v-show="titleTemplate == 0 ">
                    <div class="editor-group-label">副标题：</div>
                    <div class="editor-group-control">
                        <div class="input-wrap">
                            <input v-model.trim="subTitle" maxlength="40">
                        </div>
                    </div>
                </div>
                <div class="editor-group" v-show="titleTemplate == 0 ">
                    <div class="editor-group-label">导航名称：</div>
                    <div class="editor-group-control">
                        <div class="input-wrap">
                            <input v-model.trim="navigateName" maxlength="40">
                        </div>
                    </div>
                </div>
                <div class="editor-group" v-show="titleTemplate == 0 ">
                    <div class="editor-group-label">背景颜色：</div>
                    <div class="editor-group-control">
                        <input class="color-picker-preview" ref='bgColor' v-model="bgColor">
                    </div>
                </div>
                <div class="editor-group" v-show="titleTemplate == 1 ">
                    <div class="editor-group-label">日期：</div>
                    <div class="editor-group-control">
                        <div class="input-wrap">
                            <input v-model.trim="wxDate" maxlength="20">
                        </div>
                    </div>
                </div>
                <div class="editor-group" v-show="titleTemplate == 1 ">
                    <div class="editor-group-label">作者：</div>
                    <div class="editor-group-control">
                        <div class="input-wrap">
                            <input v-model.trim="wxAuthor" maxlength="20">
                        </div>
                    </div>
                </div>
                <div class="editor-group" v-show="titleTemplate == 1 ">
                    <div class="editor-group-label">链接标题：</div>
                    <div class="editor-group-control">
                        <div class="input-wrap">
                            <input v-model.trim="wxLinkTitle" maxlength="20">
                        </div>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label">链接：</div>
                    <div class="editor-group-control">
                        <nc-link-menu @onselect="bindSelectLinkMenu" :init-info="currentLinkInfo"></nc-link-menu>
                    </div>
                </div>
            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    import ncLinkMenu from "./link-menu.vue";
    /**
     * 默认的数据格式
     */
    var defaultDataFormat = {
        // 标题
        title: "",
        // 副标题
        subTitle: "",
        // 导航名称
        navigateName: "",
        // 标题模板
        titleTemplate: 0,
        // 文字颜色
        bgColor: "#F9F9F9",
        // 显示方式 0：文字靠左 1: 文字居中 2：文字靠右
        showMethod: 0,
        // 链接显示标题
        linkTitle: "",
        //  链接类型标识
        linkType: "",
        // 链接类型显示名称
        linkTypeName: "",
        // 链接值
        linkValue: "",
        //链接值显示名称
        linkValueName: "",
        // 微信作者
        wxAuthor: "",
        // 微信时间
        wxDate: "",
        // 微信标题
        wxLinkTitle: "",
        // 当前组件类型
        type: "title"
    };
    var compInfo = {
        title: "标题",
        type: "title",
        group: 0,
        max: 0
    };
    export default {
        name: "nc-design-item-title",
        otherInfo: compInfo,
        components: {
            "nc-link-menu": ncLinkMenu
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {
            let data = !Nc.isEmpty(this.options) ? {
                    title: this.options.title,
                    // 副标题
                    subTitle: this.options.subTitle,
                    // 导航名称
                    navigateName: this.options.navigateName,
                    // 标题模板
                    titleTemplate: this.options.titleTemplate,
                    // 文字颜色
                    bgColor: this.options.bgColor,
                    // 显示方式 0：文字靠左 1: 文字居中 2：文字靠右
                    showMethod: this.options.showMethod,
                    // 链接显示标题
                    linkTitle: this.options.linkTitle,
                    // 微信作者
                    wxAuthor: this.options.wxAuthor,
                    // 微信作者
                    wxDate: this.options.wxDate,
                    // 微信标题
                    wxLinkTitle: this.options.wxLinkTitle,
                    linkType: this.options.linkType,
                    linkTypeName: this.options.linkTypeName,
                    linkValue: this.options.linkValue,
                    linkValueName: this.options.linkValueName,
                    // 当前组件类型
                    type: "title"
                } :
                $.extend(true, {}, defaultDataFormat);
            let customData = {
                enableValid: false,
                hasError: false
            };
            return $.extend({}, data, customData);
        },
        computed: {
            /**
             * 当前的样式
             */
            currentStyle() {
                let templateType = this.titleTemplate,
                    r = {
                        textAlign: this.showMethod != 0 ?
                            this.showMethod == 1 ? "center" : "right" : "left"
                    };
                if (templateType == 0) {
                    r.backgroundColor = this.bgColor;
                }
                return r;
            },
            /**
             * 当前链接选择数据
             */
            currentLinkInfo() {
                return {
                    linkType: this.linkType,
                    linkTypeName: this.linkTypeName,
                    linkValue: this.linkValue,
                    linkValueName: this.linkValueName
                };
            }
        },
        mounted() {
            var self = this;
            $(this.$refs.bgColor).spectrum({
                optionTemplate: 2,
                defaultColor: "#F9F9F9",
                move: function(color) {
                    self.bgColor = color.toHexString();
                },
                change: function(color) {
                    self.bgColor = color.toHexString();
                }
            });
        },
        methods: {
            /**
             * 获取当前数据
             */
            getCurrentData() {
                this.enableValid = true
                return !(this.hasError = this.title ? false :true ) ? {
                    title: this.title,
                    subTitle: this.subTitle,
                    navigateName: this.navigateName,
                    titleTemplate: this.titleTemplate,
                    bgColor: this.bgColor,
                    showMethod: this.showMethod,
                    linkTitle: this.linkTitle,
                    linkType: this.linkType,
                    linkTypeName: this.linkTypeName,
                    linkValue: this.linkValue,
                    linkValueName: this.linkValueName,
                    wxAuthor: this.wxAuthor,
                    wxDate: this.wxDate,
                    wxLinkTitle: this.wxLinkTitle,
                    type: this.type
                } : null
            },
            /**
             * 修改链接类型
             * @param linkSelectInfo
             */
            bindSelectLinkMenu(linkSelectInfo) {
                console.log("修改链接类型", linkSelectInfo.info);
                let info = linkSelectInfo.info;
                if (info) {
                    this.linkType = info.linkType;
                    this.linkValue = info.linkValue;
                    this.linkValueName = info.linkValueName;
                    this.linkTypeName = info.linkTypeName;
                } else {
                    this.linkType = "";
                    this.linkValue = "";
                    this.linkValueName = "";
                    this.linkTypeName = "";
                }
            },
            bindInputTitle() {
                if (this.enableValid == true) {
                    this.hasError = this.title ? false : true
                }
            }
        }
    };
</script>